import Avatar from '../../components/ui/Avatar';
import Button from '../../components/ui/Button';
import Card from '../../components/ui/Card';
import CategoriedList from '../../components/ui/CategoriedList';
import Input from '../../components/ui/Input';
import Loading from '../../components/ui/Loading';

import { CheckCircle2Icon } from 'lucide-react';

import toast from 'react-hot-toast';
import ColorTable from './ColorTable';

const CARD_CLASS = 'my-2';

export default function Page() {
  return (
    <div>
      <h1>组件</h1>

      <Card className={CARD_CLASS}>
        <h2>按钮</h2>
        <div className="flex gap-2">
          <Button size="lg">按钮</Button>
          <Button size="lg" disabled>
            禁用
          </Button>
        </div>
        <div className="flex gap-2">
          <Button>按钮</Button>
          <Button disabled>禁用</Button>
        </div>
        <div className="flex gap-2">
          <Button size="sm">按钮</Button>
          <Button size="sm" disabled>
            禁用
          </Button>
        </div>
      </Card>
      <Card className={CARD_CLASS}>
        <h2>输入框</h2>
        <Input placeholder="请在此输入" />
        <Input placeholder="请在此输入" block />
      </Card>
      <Card className={CARD_CLASS}>
        <h2>Avatar</h2>
        <div className="inline-flex items-center">
          <Avatar size="sm" />
          <Avatar />
          <Avatar size="lg" />
        </div>
      </Card>
      <Card className={CARD_CLASS}>
        <h2>Loading</h2>
        <div className="inline-flex items-center">
          <Loading size="sm" />
          <Loading />
          <Loading size="lg" />
        </div>
      </Card>
      <Card className={CARD_CLASS}>
        <h2>Toast</h2>
        <Button
          onClick={() => {
            toast.success('Hello world!', { icon: <CheckCircle2Icon /> });
          }}
        >
          Toast
        </Button>
      </Card>
      <Card className={CARD_CLASS}>
        <h2>CategoriedList</h2>
        <div className="w-60 border">
          <CategoriedList
            items={[
              {
                name: '分类1',
                active: true,
                items: [
                  { name: '分类1-1', onClick: () => {}, active: true },
                  { name: '分类1-2', onClick: () => {}, active: false },
                ],
              },
              {
                name: '分类2',
                active: false,
                items: [
                  { name: '分类2-1', onClick: () => {}, active: false },
                  { name: '分类2-2', onClick: () => {}, active: false },
                ],
              },
              {
                name: '分类3',
                active: false,
                items: [
                  { name: '分类3-1', onClick: () => {}, active: false },
                  { name: '分类3-2', onClick: () => {}, active: false },
                ],
              },
            ]}
          />
        </div>
      </Card>
      <Card className={CARD_CLASS}>
        <h2>CategoriedList</h2>
        <ColorTable />
      </Card>
    </div>
  );
}
